<template>
  <div>
    <el-card>
      陈志航
      <div class="el-head">试题录入</div>
      <div class="form_warp">
        <el-form :model="enteringForm" :rules="rules" ref="ruleForm" label-width="120px">
          <el-form-item label="学科:" prop="subjectID">
            <el-select v-model="enteringForm.subjectID" class="w400" @change="subjectChange">
              <el-option v-for="item in subjectList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select v-model="enteringForm.catalogID" class="w400">
              <el-option v-for="item in directorysList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select v-model="enteringForm.enterpriseID" class="w400">
              <el-option v-for="item in companyList" :key="item.id" :label="item.company" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市:" prop="province">
            <el-row type="flex" class="w400">
              <el-select v-model="enteringForm.province" class="w200" style="padding-right:5px" @change="getCitys">
                <el-option v-for="item in provinceList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <el-select v-model="enteringForm.city" class="w200" style="padding-left:5px">
                <el-option v-for="item in citysList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </el-row>
          </el-form-item>
          <el-form-item label="方向:" prop="direction">
            <el-select v-model="enteringForm.direction" class="w400">
              <el-option v-for="item in direction" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型:" prop="questionType">
            <el-radio-group v-model="enteringForm.questionType" class="w400" @change="questionTypeChange">
              <el-radio label="1">单选</el-radio>
              <el-radio label="2">多选</el-radio>
              <el-radio label="3">简答</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度:" prop="difficulty">
            <el-radio-group v-model="enteringForm.difficulty" class="w400">
              <el-radio label="1">简单</el-radio>
              <el-radio label="2">一般</el-radio>
              <el-radio label="3">困难</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干:" prop="question">
            <quill-editor v-model="enteringForm.question" :options="editorOption"></quill-editor>
          </el-form-item>
          <el-form-item label="选项:" v-if="enteringForm.questionType !== '3'">
            <el-row class="padding20" v-for="item in options" :key="item.code">
              <el-radio :label="1" v-if="enteringForm.questionType === '1'" v-model="item.isRight"
                @change="radioChange(item)">{{item.code}}:
              </el-radio>
              <el-checkbox :label="`${item.code}:`" v-else-if="enteringForm.questionType === '2'"
                v-model="item.isRight">
              </el-checkbox>
              <el-input class="w240" v-model="item.title"></el-input>
            </el-row>
            <el-row>
              <el-button type="danger" icon="el-icon-plus" size="small" :disabled='enteringForm.questionType ==="1"'
                @click="addOptions">
                增加选项与答案</el-button>
            </el-row>
          </el-form-item>
          <el-form-item label="解析视频:">
            <el-input v-model="enteringForm.videoURL" class="w400"></el-input>
          </el-form-item>
          <el-form-item label="答案解析:" prop="answer">
            <quill-editor v-model="enteringForm.answer" :options="editorOption"></quill-editor>
          </el-form-item>
          <el-form-item label="题目备注:">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="enteringForm.remarks" class="w400">
            </el-input>
          </el-form-item>
          <el-form-item label="试题标签:">
            <el-select v-model="enteringForm.tags" class="w400" multiple filterable allow-create default-first-option>
              <el-option v-for="item in tagsList" :key="item.value" :label="item.label" :value="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submit">确认提交</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects.js'
import { simple as directorys } from '@/api/hmmm/directorys.js'
import { list as company } from '@/api/hmmm/companys.js'
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction } from '@/api/hmmm/constants.js'
import { simple as tags } from '@/api/hmmm/tags.js'
import hljs from 'highlight.js'
import 'highlight.js/styles/monokai-sublime.css'
import { add, detail } from '@/api/hmmm/questions.js'
export default {
  name: 'entering',
  data () {
    return {
      enteringForm: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        questionType: '1',
        difficulty: '1',
        question: '',
        videoURL: '',
        answer: '',
        remarks: '',
        tags: ''
      },
      rules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [{ required: true, message: '请选择企业', trigger: 'blur' }],
        province: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        citys: [{ required: true, message: '请选择地区', trigger: 'blur' }],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案解析', trigger: 'blur' }]
      },
      // 储存学科列表的下拉选项
      subjectList: [],
      // 目录列表
      directorysList: [],
      // 企业列表
      companyList: [],
      // 省列表
      provinceList: [],
      // 市列表
      citysList: [],
      // 方向列表
      direction,
      options: [{
        code: 'A',
        title: '',
        isRight: false
      }, {
        code: 'B',
        title: '',
        isRight: false
      }, {
        code: 'C',
        title: '',
        isRight: false
      }, {
        code: 'D',
        title: '',
        isRight: false
      }],
      // 设置一个初始的key值
      key: 68,
      // 标签列表
      tagsList: [],
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }, 'blockquote', 'code-block', 'image', 'link']
          ],
          syntax: {
            highlight: text => {
              return hljs.highlightAuto(text).value // 这里就是代码高亮需要配置的地方
            }
          }
        },
        placeholder: ''
      }
    }
  },
  methods: {
    // 获取学科下拉选项的菜单
    async getSubject () {
      const { data: res } = await subjectList()
      this.subjectList = res
    },
    // 学科下啦选项发生改变时触发的回调
    async subjectChange () {
      const { data: res } = await directorys(this.enteringForm)
      this.directorysList = res
      const { data: res2 } = await tags(this.enteringForm)
      this.tagsList = res2
    },
    // 获取企业列表
    async getCompanyList () {
      const { data: res } = await company()
      this.companyList = res.items
    },
    // 获取城市列表和地区列表
    getCitys (val) {
      if (this.enteringForm.citys !== '') {
        this.enteringForm.citys = ''
      }
      this.citysList = citys(val)
    },
    // 单选框
    radioChange (item) {
      this.options.forEach(item1 => {
        item1.isRight = 0
      })
      item.isRight = 1
    },
    // 点击添加选项
    addOptions () {
      this.key++
      const obj = {
        code: String.fromCharCode(this.key),
        title: '',
        isRight: false
      }
      this.options.push(obj)
    },
    // 题目类型发生改变时触发的回调
    questionTypeChange (val) {
      if (val === '1') {
        this.options = [{
          code: 'A',
          title: '',
          isRight: false
        }, {
          code: 'B',
          title: '',
          isRight: false
        }, {
          code: 'C',
          title: '',
          isRight: false
        }, {
          code: 'D',
          title: '',
          isRight: false
        }]
      }
    },
    submit () {
      this.$refs.ruleForm.validate(async valid => {
        if (!valid) return
        try {
          await add({ ...this.enteringForm, options: this.options, tags: this.enteringForm.tags.join() })
          this.$message.success('添加成功')
          this.$refs.ruleForm.resetFields()
        } catch (err) {
          console.log(err)
        }
      })
    },
    async getList (id) {
      console.log(1)
      const { data: res } = await detail(id)
      this.enteringForm = res
      this.enteringForm.tags = res.tags.split()
      this.options = res.options
    }
  },
  props: {},
  computed: {},
  watch: {},
  filters: {},
  components: {
  },
  created () {
    this.getSubject()
    this.getCompanyList()
    this.provinceList = provinces()
    console.log(this.$route.query)
    if (this.$route.query.id) {
      this.getList(this.$route.query)
    }
  },
  mounted () {
  }
}
</script>

<style scoped lang='less'>
.title {
  border-bottom: 1px solid #000;
}
.form_warp {
  width: 100%;
  padding: 20px;
  border-top: 1px solid #ebeef5;
}
.el-head {
  padding: 18px 20px;
}
/deep/.el-card__body {
  padding: unset;
}
.w400 {
  width: 400px !important;
}
.w200 {
  width: 200px;
}
.w240 {
  width: 240px;
}
.padding20 {
  padding-bottom: 20px;
}
.el-checkbox {
  margin-right: 30px;
}
/deep/.ql-editor {
  height: 200px;
}
</style>
